<template>
	<view class="user-percent">
		<view class="user-info">
			<image class="user-avatar" :src="member.avatar" />
			<view class="user-details">
				<view class="user-name" v-if="shipments==2"> {{ member.name }} {{ member.mobile }} </view>
				<view class="user-name" v-else> {{ name }} {{ tel }} </view>
				<view class="user-address"> {{ address }} </view>
			</view>
		</view>
		<view class="percent-btn">
			<view class="percent-box">
				<view class="returns-num"> 退货次数：{{member.order_refund_num?member.order_refund_num:'0'}}次 </view>
				<view class="percent">
					<BFB :bfb="member.order_refund_ratio" />
				</view>
			</view>
			<view class="btn" @tap="goUserEva"> 个人评价 </view>
		</view>
	</view>
</template>

<script setup>
	import BFB from '@/components/BFB.vue'
  import { ViewUserEvaApi } from '@/service/shop.js'
	const props = defineProps({
		member: {
			type: Object,
			default: {
				order_refund_ratio: '', // 退货率
				order_refund_num: '', // 退货订单数量
				avatar: '', 
				name: '',
				mobile: ''
			}
		},
		address: {
			type: String
		},
		shipments: {
			type: String
		},
		name: {
			type: String
		},
		tel: {
			type: String
		}
	})
  const goUserEva = () => {
    console.log(props.member.id);
    // ViewUserEvaApi({member_id: props.member.id}).then(res => {
    //   console.log(res);
    // })
    uni.navigateTo({
      url: `/pages/shopPages/orderManage/viewUserEva/viewUserEva?member_id=${props.member.id}`
    })
  }
</script>

<style scoped lang="scss">
	.user-percent {
		border-radius: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		padding: 16px 10px 10px;
		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			.user-avatar {
				width: 54px;
				height: 54px;
				border-radius: 50%;
				margin-right: 10px;
			}
			.user-details {
				flex: 1;
				.user-name {
					color: #333333;
					font-size: 16px;
					font-weight: 400;
					line-height: 17px;
					margin-bottom: 5px;
				}
				.user-address {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 21px;
				}
			}
		}
		.percent-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.percent-box {
				display: flex;
				align-items: center;
				.returns-num {
					color: #666666;
					font-size: 12px;
					font-weight: 400;
					line-height: 22px;
					margin-right: 10px;
				}
			}
			.btn {
				width: 60px;
				height: 22px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FF3B1E;
				font-size: 12px;
				font-weight: 400;
				background: #FFFFFF;
				border-radius: 98px;
				border: 1px solid #FF3B1E;
				box-sizing: border-box;
			}
		}
	}
</style>